<template>
  <div class="tech-header">
    <div class="container">
      <div class="header-content">
        <!-- Logo区域 -->
        <div class="logo-section">
          <router-link to="/" class="logo-link">
            <div class="logo">
              <el-icon class="logo-icon" size="32">
                <DataLine />
              </el-icon>
              <span class="logo-text gradient-text">TechNova</span>
            </div>
          </router-link>
        </div>

        <!-- 导航菜单 -->
        <div class="nav-section">
          <el-menu
            :default-active="activeMenu"
            mode="horizontal"
            @select="handleMenuSelect"
            class="tech-menu"
          >
            <el-menu-item index="/">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/ai">
              <el-icon><Cpu /></el-icon>
              <span>人工智能</span>
            </el-menu-item>
            <el-menu-item index="/blockchain">
              <el-icon><Connection /></el-icon>
              <span>区块链</span>
            </el-menu-item>
            <el-menu-item index="/hardware">
              <el-icon><Monitor /></el-icon>
              <span>硬件</span>
            </el-menu-item>
            <el-menu-item index="/startup">
              <el-icon><TrendCharts /></el-icon>
              <span>创业</span>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 搜索和用户操作区 -->
        <div class="action-section">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索科技资讯..."
            class="search-input"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>

          <el-button type="primary" class="search-btn" @click="handleSearch"> 搜索 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

const searchKeyword = ref('')

const activeMenu = computed(() => route.path)

const handleMenuSelect = (index: string) => {
  if (index !== route.path) {
    router.push(index)
  }
}

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search',
      query: { q: searchKeyword.value.trim() },
    })
  }
}
</script>

<style scoped lang="scss">
.tech-header {
  height: 70px;
  display: flex;
  align-items: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tech-accent-neon), transparent);
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.logo-section {
  .logo-link {
    text-decoration: none;

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all var(--tech-transition-normal) ease;

      &:hover {
        transform: scale(1.05);

        .logo-icon {
          color: var(--tech-accent-neon);
          filter: drop-shadow(0 0 8px var(--tech-accent-neon));
        }
      }

      .logo-icon {
        color: var(--tech-accent-neon);
        transition: all var(--tech-transition-normal) ease;
      }

      .logo-text {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
      }
    }
  }
}

.nav-section {
  flex: 1;
  display: flex;
  justify-content: center;

  :deep(.tech-menu) {
    background: transparent !important;
    border-bottom: none !important;

    .el-menu-item {
      color: var(--tech-text-secondary) !important;
      border-bottom: 2px solid transparent !important;
      transition: all var(--tech-transition-normal) ease;
      position: relative;
      margin: 0 8px;

      &:hover {
        color: var(--tech-accent-neon) !important;
        background: rgba(0, 212, 255, 0.1) !important;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(57, 255, 20, 0.1));
          pointer-events: none;
          border-radius: 4px;
        }
      }

      &.is-active {
        color: var(--tech-accent-neon) !important;
        border-bottom-color: var(--tech-accent-neon) !important;
        background: rgba(0, 212, 255, 0.15) !important;
      }

      .el-icon {
        margin-right: 8px;
      }
    }
  }
}

.action-section {
  display: flex;
  align-items: center;
  gap: 12px;

  .search-input {
    width: 250px;

    :deep(.el-input__wrapper) {
      background: rgba(21, 21, 32, 0.8);
      border: 1px solid rgba(0, 212, 255, 0.3);
      transition: all var(--tech-transition-normal) ease;

      &:hover {
        border-color: var(--tech-accent-neon);
        box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
      }

      &.is-focus {
        border-color: var(--tech-accent-neon) !important;
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
      }
    }

    :deep(.el-input__inner) {
      color: var(--tech-text-primary);

      &::placeholder {
        color: var(--tech-text-muted);
      }
    }
  }

  .search-btn {
    background: var(--tech-gradient-primary);
    border: none;
    transition: all var(--tech-transition-normal) ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .action-section .search-input {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 10px;

    .nav-section {
      order: 3;

      :deep(.tech-menu) {
        .el-menu-item {
          font-size: 14px;
          margin: 0 4px;
          padding: 0 12px;
        }
      }
    }

    .action-section {
      order: 2;

      .search-input {
        width: 180px;
      }
    }
  }

  .tech-header {
    height: auto;
    padding: 10px 0;
  }
}
</style>
